<template>
  <div>
    <div>
      <mt-header title="门票" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div>
      <com-swipe></com-swipe>
    </div>
    <div class="page-loadmore-list">
      <div v-for="(item) in mplist" class="info-show" :key="item.id">
        <div class="div-body" @click="goAttractionsdetail(item.id)">
          <div class="div-body-img" v-if="item.img === ''">
            <img src="../../assets/images/photo/666.jpg" />
          </div>
          <div v-else class="div-body-img">
            <img v-bind:src='host+item.img' />
          </div>
          <div class="div-body-spmc">
            <div class="div-body-spmc-child">
              <span style="color:black;font-size: 18px;">{{item.mc}}</span>
            </div>
            <div class="div-body-spmc-child">
              <span style="color:#888;font-size: 14px;">{{item.ms}}{{item.ms}}</span>
            </div>
            <div class="div-body-spmc-child">
              <span style="color:#888;font-size: 12px;">销量：{{item.xsl}}</span>
            </div>
            <div class="div-body-spmc-child">
              <span style="color:#ff6c00;font-size: 12px;">¥</span>&nbsp;
              <span style="color:#ff6c00;font-size: 18px;">{{item.jg}}</span>&nbsp;
              <span style="color:#888;font-size: 12px">起</span>
            </div>
          </div>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import Swipe from "../../components/Swipe";
export default {
  name: 'attractions',
  components: {
    comSwipe: Swipe
  },
  data() {
    return {
      mplist: [],
      topStatus: "",
      wrapperHeight: 0,
      translate: 0,
      moveTranslate: 0,
      allLoaded: false,
      bottomStatus: "",
      id: "",
      img: "",
      jb: "",
      jg: "",
      mc: "",
      ms: "",
      msjg: "",
      xsl: "",
      host: "http://wap.tuoxingwang.net/"
    };
  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },
    goAttractionsdetail(jqid) {
      this.$router.push({
        path: "/attractionsdetailfirst",
        query: { jqid: jqid }
      });
    },
    getAttractionsList() {
      axios({
        method: "post",
        url: "/api/jqxx/list.htm",
        params: {
          xsl: 1,
          ddid: 15
        }
      }).then(res => {
        res = res.data;
        if (res.zt === true) {
          this.mplist = res.data;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    handleTopChange(status) {
      this.moveTranslate = 1;
      this.topStatus = status;
    },
    changeeditebutton() {
      this.editflage = false;
      this.completeflage = true;
    },
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    loadBottom() {
      setTimeout(() => {
        let lastValue = this.mplist[this.mplist.length - 1];
        if (lastValue < 40) {
          for (let i = 1; i <= 5; i++) {
            this.mplist.push(lastValue + i);
          }
        } else {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      }, 1500);
    }
  },
  mounted() {
    this.getAttractionsList();
  }
};
</script>

<style scoped>
.child-view {
  position: relative;
  height: 100%;
  padding-top: 40px;
}
.mint-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.info-show {
  margin: 5px 0;
}

.div-body {
  padding: 0 5px;
  border-bottom: 1px solid #eee;
}

.div-body-img {
  width: 90px;
  height: 90px;
  float: left;
}

.div-body-img img {
  width: 100%;
  height: 100%;
}
.div-body-spmc {
  width: calc(100% - 90px);
  float: left;
}
.div-body-spmc-child {
  padding-left: 5px;
  padding-right: 5px;
}
.div-body-spmc-child:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.div-body-spmc-child:nth-child(3) {
  text-align: right;
}
</style>
